<template>
  <div class="navMenu">


    <el-menu 
          router 
          :default-active="activeIndex" 
          class="el-menu-demo" 
          mode="horizontal" 
          text-color="#000"
          active-text-color="#008788"
          background-color="#fff"
          @select="select"
          >
      <template v-for="navMenu in navMenus">
        <!-- 最后一级菜单 -->

        <el-menu-item v-if="!navMenu.childs && navMenu.entity" :key="navMenu.entity.id" :data="navMenu"
          :index="navMenu.entity.name">
          <i :class="['iconfont',navMenu.entity.icon]"></i>
          <span slot="title">{{ navMenu.entity.alias }}</span>
        </el-menu-item>

        <!-- 此菜单下还有子菜单 -->
        <el-submenu 
        @click.native="goto(navMenu.entity.value)" 
        v-if="navMenu.childs && navMenu.entity"
        :key="navMenu.entity.id" :data="navMenu" 
        :index="navMenu.entity.name"
        popper-class="my-popper">
          <template slot="title">
            <span :class="['iconfont',navMenu.entity.icon]"></span>
            <span> {{ navMenu.entity.alias }}</span>
          </template>
          <el-menu-item 
          
          :index="child.entity.name"
          :key="child.entity.id"
          v-for="child in navMenu.childs"
          >{{ child.entity.alias }}</el-menu-item>
        </el-submenu>
      </template>
    </el-menu>

  </div>
</template>
  
<script>
export default {
  name: "NavMenu",
  props: ["navMenus"],
  data() {
    return {
      activeIndex: "home",
    };
  },
  mounted() {
    // this.$router.push('/')
    const activeTab = localStorage.getItem('activeIndex');
    if (activeTab) {
      this.activeIndex = activeTab;
    } else {
      this.activeIndex = 'home'; // 默认选中第一个选项卡
    }
  },
  methods: {
    goto(path) {
      if (path) {
        this.$router.push(path);
      }
    },
    select(index,indexPath){
      // console.log('index:',index,'indexPath:',indexPath);
      if(indexPath.length===1){
        localStorage.setItem('activeIndex', indexPath[0]); // 点击时记录当前选项卡的位置
      }
      if(indexPath.length===2){
        localStorage.setItem('activeIndex', indexPath[1]); // 点击时记录当前选项卡的位置
      }
      
    }
   
  },
};
</script>
  
<style lang="less">
.el-menu-demo{
  display: flex;
  justify-content: space-between;
}
.el-main{
  overflow-x:auto!important;
  overflow-y:hidden !important;
}
.el-submenu__title,
.el-menu-item {
  text-align: center;
  width: 3rem;
  font-size: 0.2rem !important;
  
  .iconfont{
    font-size: 0.4rem;
    margin-right: 0.3rem;
  }
  
  &:hover{
    background-color: #e3f2fe !important;
  }
}

</style>
  